$red: #E24040;
$black: #000;
.Pc {
  height: 92vh;
  overflow: auto;

  .box {
    max-width: 1200px;
    margin: 0 auto;
    color: #fff;
    padding-bottom: 100px;

    .top {
      display: flex;
      padding: 63px 0 37px;
      align-items: center;
      justify-content: center;

      .left {
        display: flex;
        width: 30%;
        align-items: center;

        .avatar {
          border-radius: 50%;
          width: 80px;
          height: 80px;
          margin-right: 20px;
          display: inline-block;
          vertical-align: mathematical;


        }

        .userinfo {
          .box_num {
            display: flex;
            margin-top: 10px;

            .num {
              font-size: 28PX;
              color: #F4D663;
            }

            img {
              z-index: 1;
              width: 15px;
              height: 15px;
            }
          }
        }
      }

      .right {
        display: flex;
        width: 70%;
        align-items: center;

        .button_list {
          display: flex;
          width: 35%;
          font-size: 24px;

          .item:first-child {
            margin-right: 20px;
            background: $red;
          }

          .item {
            width: 114px;
            height: 60px;
            text-align: center;
            background: $black;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
          }
        }

        .my {
          display: flex;
          width: 35%;
          font-size: 18px;

          .item {
            width: 33%;
            text-align: center;

            img {
              margin-bottom: 9px;
            }
          }
        }
      }


    }

    .main {
      background: $black;
      height: 60%;
      overflow: auto;
      border-radius: 20px;
      //padding-bottom: 100px;

      .list {
        padding: 0 30px;

        .li {
          padding: 16px 0;
        }

        .li:nth-child(1) {
          padding: 22px 0;
        }

        .li:nth-child(n + 1) {
          color: #aaa;
          font-size: 20px;
        }

        .li:nth-child( 1) {
          color: #fff;
          font-size: 22px;
        }

        .li:nth-child(2n) {
          background: #323232;
          border-radius: 10px;
        }
      }
    }
  }

  .bets-model {
    .bet-ul {
      .li {
        display: flex;
        align-items: center;

        .right {
          flex: 1;
          border-bottom: 1px solid #323232;
          position: relative;
          padding: 15px 0;

          .item {
            display: flex;

            .num {
              color: #fff;
              font-size: 15px;
              font-weight: bold;
              line-height: 22px;
              flex: 1;
            }

            .text {
              font-size: 14px;
              line-height: 20px;
              color: #fff;
            }

            .time {
              font-size: 12px;
              color: #aaaaaa;
              line-height: 17px;
              flex: 1;
            }

            .total {
              color: #333333;
              font-size: 15px;
              font-weight: bold;
              line-height: 22px;
            }
          }

          .item1 {
            margin-top: 5px;
          }

          .icon {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: 12px;
          }
        }
      }

      //.li:last-child {
      //  .right {
      //    border: 0
      //  }
      //}
    }
  }
}

//绿色
.c-0e9666 {
  color: #0e9666 !important;
}

//灰色
.c-333333 {
  color: #333333;
}

.Mobile {
  height: 91vh;
  overflow: auto;
  padding-bottom: 80px;

  .main-contain {
    color: #fff;

    .bet-ul {
      border-top: 15px solid #323232;

      .li {
        display: flex;
        align-items: center;

        .left {
          width: 60px;
          margin: 0 10px;
          overflow: hidden; /*内容会被修剪，并且其余内容是不可见的*/
          text-overflow: ellipsis; /*显示省略符号来代表被修剪的文本。*/
          white-space: nowrap; /*文本不换行*/
        }

        .right {
          flex: 1;
          border-bottom: 1px solid #323232;
          position: relative;
          padding: 15px 38px 15px 0;

          .item {
            display: flex;

            .num {
              color: #333333;
              font-size: 15px;
              font-weight: bold;
              line-height: 22px;
              flex: 1;
            }

            .text {
              font-size: 14px;
              line-height: 20px;
              color: #fff;
            }

            .time {
              font-size: 12px;
              color: #aaaaaa;
              line-height: 17px;
              flex: 1;
            }

            .total {
              color: #333333;
              font-size: 15px;
              font-weight: bold;
              line-height: 22px;
            }
          }

          .item1 {
            margin-top: 5px;
          }

          .icon {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: 12px;
          }
        }
      }

      //.li:last-child {
      //  .right {
      //    border: 0
      //  }
      //}
    }
  }

  .bets-model {
    .bet-ul {
      .li {
        display: flex;
        align-items: center;

        .right {
          flex: 1;
          border-bottom: 1px solid #323232;
          position: relative;
          padding: 15px 0;

          .item {
            display: flex;

            .num {
              color: #fff;
              font-size: 15px;
              font-weight: bold;
              line-height: 22px;
              flex: 1;
            }

            .text {
              font-size: 14px;
              line-height: 20px;
              color: #fff;
            }

            .time {
              font-size: 12px;
              color: #aaaaaa;
              line-height: 17px;
              flex: 1;
            }

            .total {
              color: #333333;
              font-size: 15px;
              font-weight: bold;
              line-height: 22px;
            }
          }

          .item1 {
            margin-top: 5px;
          }

          .icon {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: 12px;
          }
        }
      }

      //.li:last-child {
      //  .right {
      //    border: 0
      //  }
      //}
    }
  }
}